<script lang="ts" setup>
import { ref, watch, reactive } from "vue";

const emit = defineEmits<{
  (e: "update:visible", val: boolean): void;
  (e: "changeUnit", ids: string, texts: string): void;
}>();

const props = defineProps({
  /**是否显示 */
  visible: {
    type: Boolean,
    default: false
  },
  showCheckbox: {
    type: Boolean,
    default: false
  }
});

//设置是否显示双向绑定
const visibleModelValue = ref(props.visible);
watch(
  () => props.visible,
  val => {
    visibleModelValue.value = val;
  }
);
watch(visibleModelValue, val => {
  emit("update:visible", val);
});

//双向绑定选中的部门值
const UnitTreeDialogState = reactive({
  onFinishHandler: (ids: string, texts: string) => {
    emit("changeUnit", ids, texts);
  }
});
</script>
<template>
  <div class="vms-unit-tree-dialog">
    <slot></slot>
    <jxtech-unit-dialog-ext
      v-model:visible="visibleModelValue"
      :multiple="showCheckbox"
      :append-to-body="true"
      @finish="UnitTreeDialogState.onFinishHandler"
    ></jxtech-unit-dialog-ext>
  </div>
</template>

<style lang="scss" scoped></style>
